Skip to content

style(frontend): Move cross-network swap info box near the tokens#12290

Merged
AntonioVentilii merged 8 commits intomainfrom
style-frontend/Move-cross-network-swap-info-box-near-the-tokens
Apr 2, 2026
Merged

style(frontend): Move cross-network swap info box near the tokens#12290
AntonioVentilii merged 8 commits intomainfrom
style-frontend/Move-cross-network-swap-info-box-near-the-tokens

Conversation

@AntonioVentilii
Copy link
Copy Markdown
Collaborator

@AntonioVentilii AntonioVentilii commented Apr 2, 2026

Motivation

We refactor a bit the layout of the Swaps to make the cross-network info box appear near the tokens.

Screenshot 2026-04-02 at 11 23 37 Screenshot 2026-04-02 at 11 23 44

@AntonioVentilii AntonioVentilii marked this pull request as ready for review April 2, 2026 08:38
@AntonioVentilii AntonioVentilii requested a review from a team as a code owner April 2, 2026 08:38
Copilot AI review requested due to automatic review settings April 2, 2026 08:38
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR refactors the swap UI layout so the cross-network (“cross-chain”) info box is displayed closer to the token inputs, rather than down near provider/fees sections.

Changes:

  • Move the cross-network info box into the shared SwapForm (so it appears near token inputs for all swap flows).
  • Adjust the swap review layout to show the cross-network info box nearer the token summary and simplify the divider handling.
  • Simplify SwapCrossChainInfo by removing its optional Hr/hrSpacing support.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
src/frontend/src/sol/components/swap/SwapSolForm.svelte Removes the cross-network info box from the SOL swap details section (now handled by shared form).
src/frontend/src/eth/components/swap/SwapEthForm.svelte Removes the cross-network info box from the ETH swap details section (now handled by shared form).
src/frontend/src/lib/components/swap/SwapForm.svelte Adds SwapCrossChainInfo just below the token inputs so it’s consistently positioned.
src/frontend/src/lib/components/swap/SwapReview.svelte Repositions SwapCrossChainInfo near the token review and replaces the previous conditional divider with an Hr.
src/frontend/src/lib/components/swap/SwapCrossChainInfo.svelte Removes hrSpacing prop + internal Hr rendering; component now only renders the message box when applicable.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/frontend/src/lib/components/swap/SwapReview.svelte
@DenysKarmazynDFINITY
Copy link
Copy Markdown
Contributor

margin-top between info box and above elements seems to be missing in the Form step (in Review, it's there) - can we please align that?

@AntonioVentilii AntonioVentilii disabled auto-merge April 2, 2026 09:23
@AntonioVentilii
Copy link
Copy Markdown
Collaborator Author

@DenysKarmazynDFINITY good catch! updated it, and updated the screenshots. Have a look pls

@AntonioVentilii AntonioVentilii added this pull request to the merge queue Apr 2, 2026
Merged via the queue into main with commit f598908 Apr 2, 2026
80 checks passed
@AntonioVentilii AntonioVentilii deleted the style-frontend/Move-cross-network-swap-info-box-near-the-tokens branch April 2, 2026 11:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants